import utils from '@/mixins/utils.js';
import parkinglotMixin from '@/mixins/parkingLot/parkinglotInfo.js';
export default {
	mixins: [parkinglotMixin, utils],
	name: 'editParkingLotInfo',
	data() {
		return {
			parkBaseInfo: null
		};
	},
	created() {
		this.getParkBaseInfo();
	},
	methods: {
		getParkBaseInfo() {
			API.fetchGet('/operatorPark/getOperatorParkBaseInfo', {
				parkID: this.$route.query.parkId
			}).then(
				res => {
					if (res.data) {
						res.data.parkBaseInfo.defaultProvince = res.data.defaultProvince;
						res.data.parkBaseInfo.agreementPath = res.data.agreementPath;

						let uiOpt = {
							parkinglotImgfileList: res.data.parkBaseInfo.picPath
								? [
										{
											name: '停车场图片',
											url: res.data.parkBaseInfo.picPath
										}
								  ]
								: [],
							protocolList: res.data.parkBaseInfo.agreementPath
								? [
										{
											name: '车场协议',
											url: res.data.parkBaseInfo.agreementPath
										}
								  ]
								: [],
							gpsXY: `${res.data.parkBaseInfo.gpsX},${res.data.parkBaseInfo.gpsY}`,
							areaAreaData: [[], [], []],
							areaSelected: ['', '', ''],
							protocolKey: res.data.parkBaseInfo.agreementPath,
							protocolKeyChange: false
						};
						this.parkBaseInfo = Object.assign(res.data.parkBaseInfo, {
							uiOpt: uiOpt
						});
						this.parkBaseInfo.uiOpt.areaSelected = res.data.parkBaseInfo.areaFullPath
							.split('.')
							.slice(0, 3);
						this.getInitAreaData(res.data.parkBaseInfo.areaFullPath.split('.'));
					}
				},
				err => {}
			);
		},
		getInitAreaData(areaSelected) {
			API.fetchGet('/operatorPark/getAreaByFatherID', {
				fatherID: 0
			}).then(
				res => {
					if (res.data) {
						this.parkBaseInfo.uiOpt.areaAreaData.splice(0, 1, res.data);
					}
				},
				err => {}
			);

			API.fetchGet('/operatorPark/getAreaByFatherID', {
				fatherID: areaSelected[0]
			}).then(
				res => {
					if (res.data) {
						this.parkBaseInfo.uiOpt.areaAreaData.splice(1, 1, res.data);
					}
				},
				err => {}
			);

			API.fetchGet('/operatorPark/getAreaByFatherID', {
				fatherID: areaSelected[1]
			}).then(
				res => {
					if (res.data) {
						this.parkBaseInfo.uiOpt.areaAreaData.splice(2, 1, res.data);
					}
				},
				err => {}
			);
		},
		async handleChange(file, fileList) {
			const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
			const isLt900K = file.raw.size / 1024 / 1024 < 0.87;
			if (!isJPG) {
				console.log('上传图片只能是 JPG 格式或者 PNG 格式!');
			}
			if (!isLt900K) {
				console.log('上传图片大小不能超过 900K!');
			}

			if (isJPG && isLt900K) {
				this.parkBaseInfo.uiOpt.parkinglotImgfileList = fileList.slice(-1);
				const imgData = await this.getUploadImgData(file);
				this.parkBaseInfo.uiOpt.parkinglotImgfileList[0].url = imgData.base64Str;
				this.parkBaseInfo.picStr = imgData.base64Str.split(',')[1];
				this.parkBaseInfo.picType = imgData.imgType;
				this.parkBaseInfo.picChangeFlag = true;
			} else {
				this.parkBaseInfo.uiOpt.parkinglotImgfileList = [];
				this.parkBaseInfo.picStr = '';
				this.parkBaseInfo.picType = '';
			}
		},
		protocolHandleChange(file, fileList) {
			this.parkBaseInfo.uiOpt.protocolList = fileList.slice(-1);
			this.$refs.protocolUpload.submit();
		},
		protocolUploadSuccess(res) {
			this.parkBaseInfo.uiOpt.protocolKey = res;
			this.parkBaseInfo.uiOpt.protocolKeyChange = true;
			this.$refs.parkBaseInfo.validateField('uiOpt.protocolKey');
		},
		protocolRemove() {
			this.parkBaseInfo.uiOpt.protocolKey = '';
			this.$refs.parkBaseInfo.validateField('uiOpt.protocolKey');
		},
		getUploadImgData(file) {
			return new Promise((resolve, reject) => {
				const reader = new FileReader();
				const self = this;
				reader.readAsDataURL(file.raw);
				reader.onload = e => {
					const result = {
						base64Str: e.target.result,
						imgType: file.raw.type.split('/')[1]
					};
					resolve(result);
				};
			});
		},

		checkIsParkNameRepeat(val) {
			return new Promise((resolve, reject) => {
				API.fetchGet('/operatorPark/hasExistParkName', {
					parkName: val,
					parkID: this.$route.query.parkId
				}).then(
					res => {
						resolve(true);
					},
					err => {
						reject(err.data.message);
					}
				);
			});
		},

		showParkinglotImg() {
			API.fetchGet('/operatorPark/getOperatorParkPicTemplateUrl').then(res => {
				window.open(res.message);
			});
		},

		downloadParkinglotProtocol() {
			API.fetchGet('/operatorPark/getOperatorParkProtocolTemplateUrl').then(res => {
				window.open(res.data);
			});
		},

		saveEdit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					console.log('valid');
					this.submitForm(this.formatParkBaseInfo(this.parkBaseInfo));
				} else {
					console.log('error!!');
					return false;
				}
			});
		},
		formatParkBaseInfo(parkBaseInfo) {
			let copy_parkBaseInfo = JSON.parse(JSON.stringify(parkBaseInfo));
			const xy = copy_parkBaseInfo.uiOpt.gpsXY.split(',');
			copy_parkBaseInfo.gpsX = xy[0];
			copy_parkBaseInfo.gpsY = xy[1];
			const saveData = {
				agreementPath: copy_parkBaseInfo.uiOpt.protocolKeyChange ? copy_parkBaseInfo.uiOpt.protocolKey : null,
				defaultProvince: copy_parkBaseInfo.defaultProvince,
				parkBaseInfo: copy_parkBaseInfo
			};
			delete saveData.parkBaseInfo.uiOpt;
			return saveData;
		},
		submitForm(saveData) {
			API.fetchPost('/operatorPark/updateOperatorParkBaseInfo', saveData).then(
				res => {
					if (res.status === 1) {
						this.showToast('修改成功', 1, 1500);
						this.back();
					} else {
						this.showToast(res.message, 2, 1500);
					}
				},
				err => {
					console.log(err);
				}
			);
		},
		back() {
			this.$router.push({
				name: 'allParkinglotInfo',
				query: this.$route.query
			});
		}
	}
};
